<template>
	<!-- 专业查询 -->
	<view class="wm">
		<view class="form">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<!-- 单招院校 -->
				<uni-forms-item label="单招学校:" name="schoolname" labelWidth="100"  :label-width="labW" label-align="right">
					<uni-easyinput type="text" v-model="FormData.schoolname" placeholder="请输入单招院校"></uni-easyinput>
				</uni-forms-item>
				<!-- 专业大类 -->
				<uni-forms-item label="专业大类:" name="questiontype" labelWidth="100"  :label-width="labW" label-align="right">
					<uni-data-picker placeholder="请选择专业大类" v-model="FormData.questiontype" popup-title="请选择专业大类"  :localdata="dataTree"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<!-- 专业名称 -->
				<uni-forms-item label="专业名称:" name="major" labelWidth="100"  :label-width="labW" label-align="right">
					<uni-easyinput type="text" v-model="FormData.major" placeholder="请输入专业"></uni-easyinput>
				</uni-forms-item>
				<button  @click="search" class="savebtn">
					<uni-icons type="search" color="#fff" size="35rpx"></uni-icons> 查询</button>
			</uni-forms>
		</view>
		<!-- 查询结果 -->
		<view class="list">
			<uni-collapse ref="collapse">
				<uni-collapse-item :title="item.name"  v-for="(item,index) in result">
					<block v-if="item.questiontype.length > 0">
						<view class="content">
							<view class="type" v-for="(ite,int) in item.questiontype" :key="int">
								<view class="typename">
									{{ite.name}}
								</view>
								<view class="major" >
									<view class="major-line" v-for="(it,ins) in ite.major">
										<navigator :url="'/subpkg/major_detail/major_detail?id=' + it.id">
											{{it.name}}
										</navigator>
									</view>
								</view>
							</view>
						</view>
						<view style="height: 20rpx;"></view>
					</block>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view style="height:70rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border:false,
				labW:"150rpx",
				FormData:{
					schoolname:"",
					questiontype:"",
					major:"",
				},
				rules:{
					
				},
				classes:"",
				dataTree: [],
				result:[],
			};
		},
		onShow(){

		},
		onReady(){
		    this.$refs.form.setRules(this.rules);
		},
		methods:{
			/**
			 * 获取专业分类
			 */
			async get_questiontype(){
				const {data:res} = await uni.$http.post("Schools/getQuestionType");
				this.dataTree = res.data;
			},
			/**
			 * 搜索
			 */
			search(){
				this.$refs.form.validate().then(async (res) => {
					console.log(res);
					//判断用户是否输入内容
					if(res.schoolname == "" && res.questiontype == "" && res.major == ""){
						return uni.$showMsg("请至少输入一个查询条件");
					}else{
						const{data:result} = await uni.$http.post("Schools/major_search",res);
						if(result.meta.status == 0){ return uni.$showMsg("未检索到相关专业")}
						this.result = result.data;
						console.log(this.result);
					}
				}).catch(err => {
					uni.hideLoading()
					uni.$showMsg(err[0].errorMessage);
				})
			},
			
			//
			onnodeclick(e) {
				console.log(e);
				
			},
			onpopupopened(e) {
				 this.get_questiontype();	
				// this.getSchoolNameAndMajor()
				// console.log('popupopened');
				
			},
			onpopupclosed(e) {
			},
			onchange(e) {
				console.log(e);
				if(typeof e.detail.value[0] !== "undefined"){
					this.FormData.questiontype = e.detail.value[0]["text"]
				}
			}
			//--
		}
	}
</script>

<style lang="scss">
.form{
	background-color:#fff;
	margin:30rpx 0 30rpx 0;
	padding:20rpx;
	border-radius: 15rpx;
	
}
.data-pickerview{
	height: 400px;
	border: 1px #e5e5e5 solid;
}
.savebtn{
	background:linear-gradient(to  right,#93bdf3,#68d0e3);
	color:#fff;
	height: 35px;
	border:0;
	line-height: 35px;
	&:active{
		background:linear-gradient(to  right,#8ab3e4,#62c4d5);
	}
}
.list{
	border-radius: 15rpx;
	overflow: hidden;
	background:#fff;
}
/*专业类型和专业表格*/
.content{
	background:linear-gradient(to bottom,#93bdf3,#549cd3);
	padding:0;
	border:1px solid #93bdf3;
	border-radius: 15rpx;
	overflow: hidden;
	margin: 10rpx 15rpx;
	color:#fff;
	.type{
		display:flex;
		justify-content: center;
		padding:0;
		border-bottom:1px solid #e4e4e4;
		&:last-child{
			border-bottom: 0;
		}
		.typename{
			width: 30%;
			padding:0;
			padding:10rpx;
			display:flex;
			justify-content: center;
			align-items: center;
			border-right:1px solid #e4e4e4;
		}
		.major{
			width: 70%;
			.major-line{
				padding:10rpx 20rpx;
				border-bottom:1px solid #e4e4e4;
				&:last-child{
					border:0;
				}
			}
		}
	}
}
	


</style>
